<template>
  <el-row :gutter="24" class="formulaList">
    <el-col :span="9">
      <el-input
        v-model="searchVal"
        placeholder="搜索函数"
        prefix-icon="el-icon-search"
        clearable
        @change="search"
      />
      <div style="max-height: 400px; overflow-y: auto;">
        <el-tree
          :data="dataList"
          :props="defaultProps"
          :default-expanded-keys="extendKeys"
          node-key="enCode"
          highlight-current
          @node-click="nodeClick"
        >
          <span
            slot-scope="{ data }"
            class="info-container"
            @mouseenter="enter(data)"
          >
            <span>{{ data.name }}</span>
            <span v-if="data.tip" class="tip">
              {{ data.tip }}
            </span>
          </span>
        </el-tree>
      </div>
    </el-col>
    <el-col :span="15">
      <div v-if="curVal" class="formula-info">
        <div class="tip">
          <el-divider direction="vertical" />
          {{ curVal.tip }}
        </div>
        <div class="text">
          <span class="title">示例：</span>
          <span class="value">{{ curVal.example }}</span>
        </div>
        <div class="text">
          <span class="title">用法说明：</span>
          <span class="value">{{ curVal.usage }}</span>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  props: {
    nodes: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchVal: null,
      curVal: null,
      extendKeys: [],
      dataList: [],
      defaultProps: {
        children: 'formula',
        label: 'name'
      }
    }
  },
  watch: {
    nodes: {
      handler(val) {
        if (val != null) {
          this.searchVal = null
          this.dataList = val
          this.initExtends()
        } else {
          this.dataList = []
        }
      },
      immediate: true
    }
  },
  methods: {
    nodeClick(e) {
      if (e == null || e.disabled) {
        return
      }
      this.curVal = e
      this.$emit('chiose', e)
    },
    enter(e) {
      if (e.formula == null) {
        this.curVal = e
      }
    },
    search() {
      if (this.searchVal == null || this.searchVal === '') {
        this.dataList = this.nodes
      } else {
        this.dataList = this.findAll()
      }
      this.initExtends()
    },
    initExtends() {
      this.extendKeys = []
      this.dataList.forEach((c) => {
        if (c.formula != null && c.formula.length > 0) {
          c.disabled = true
          this.extendKeys.push(c.enCode)
        }
      })
    },
    findAll() {
      const val = this.searchVal.toLowerCase()
      const list = []
      this.nodes.forEach(c => {
        const t = {
          name: c.name,
          enCode: c.enCode
        }
        if (c.formula) {
          t.formula = []
          this.filterItems(c.formula, val, t)
          if (t.formula.length > 0) {
            list.push(t)
          }
        } else if (c.name.toLowerCase().includes(val)) {
          list.push(t)
        }
      })
      return list
    },
    filterItems(nodes, val, sour) {
      nodes.forEach(c => {
        const t = {
          name: c.name,
          enCode: c.enCode
        }
        if (c.formula) {
          t.formula = []
          this.filterItems(c.formula, t)
          if (t.formula.length > 0) {
            sour.formula.push(t)
          }
        } else if (c.name.toLowerCase().includes(val)) {
          sour.formula.push(t)
        }
      })
    }
  }
}
</script>
<style scoped>
.formulaList {
  width: 100%;
  margin-top: 10px;
}
.info-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.info-container .tip {
  font-size: 12px;
  color: #999;
  margin-top: 1px;
  line-height: 1.2;
}
.formula-info {
  width: 100%;
}
.formula-info .tip {
  width: 100%;
  line-height: 30px;
  height: 30px;
  margin-bottom: 10px;
  font-size: 16px;
}
.formula-info .tip .el-divider {
  background-color: #1890ff;
  width: 3px;
}
.formula-info .info-text {
  font-size: 12px;
  color: #6b7280;
  margin: 6px 0;
}
::v-deep .el-tree-node__content {
  height: 100%;
  padding: 6px 0;
  user-select: none;
}
.formula-list .tip {
  font-size: 12px;
  color: #999;
  margin-top: 1px;
  line-height: 1.2;
}
.formula-info .text {
  width: 100%;
  line-height: 25px;
  font-size: 14px;
  padding: 5px;
  padding-left: 10px;
}
.formula-info .text .title {
  font-size: 16px;
  width: 120px;
  display: inline-block;
  text-align: right;
}
.formula-info .text .value {
     white-space: pre-wrap;
    display: inline-flex;
    width: 285px;
}
</style>
